<template>
  <div id="test">
    <div class="exam">
      <div class="exam_header">
        <img src="../assets/pics/exam.webp" alt="" />
        <div class="exam_info">
          <h1>HTML和CSS学习测验</h1>
          <span class="exam_ex" style="width: 170px"
            >共15题 单选题一题5分 判断题一题10分</span
          >
          <p class="exam_ex">满分100分</p>
          <span>用户名：{{ username }}</span>
        </div>
        <div class="tips">
          <p>
            Tip:测试中可以点击"查看考卷情况"按钮查看做题情况~答完题点击"交卷"按钮以提交,然后点击"考卷解析"按钮查看正确答案！
          </p>
        </div>
        <div class="btn">
          <el-button
            type="success"
            @click="flag = !flag"
            round
            :disabled="checked"
            >考卷解析(再次点击返回考卷)</el-button
          >
        </div>
      </div>
      <div class="exam_main" v-if="flag">
        <div class="exam_ques" v-for="(item1, index1) in exam" :key="item1.id">
          {{ index1 + 1 }}:{{ item1.question }}
          <ul class="exam_options">
            <li v-for="(item2, index2) in item1.options" :key="index2">
              <input
                type="radio"
                :name="item1.name"
                :data-value="item2"
                :data-index="index1"
                @change="getRadiovalue(item2, index1)"
              />{{ item2 }}
            </li>
          </ul>
        </div>
        <el-button class="exam_info" type="primary" @click="examinfo = true"
          >查看考卷情况</el-button
        >
        <el-drawer
          class="drawer"
          title="考卷答题详情"
          :visible.sync="examinfo"
          direction="rtl"
          size="25%"
        >
          <ul>
            <li
              v-for="(item, index) in exam"
              :key="item.id"
              :class="item.isTouched === true ? 'touch' : ''"
            >
              {{ index + 1 }}
            </li>
          </ul>
          <div>
            <el-button class="btn" type="success" @click="submit" round
              >交卷</el-button
            >
          </div>
        </el-drawer>
      </div>
      <div class="exam_res" v-else>
        <div class="exam_answers">
          <div class="left">
            <p style="color: red">你答对了：{{ this.num }} 题</p>
            <p style="color: red; margin-bottom: 10px">
              你的测试分数：{{ this.score }} 分
            </p>
            <p>测验答案：{{ this.answers }}</p>
            <p>你的答案：{{ this.useranswers }}</p>
          </div>
          <div class="right">
            <span>答题正确率 :</span>
            <el-progress
              type="line"
              :percentage="per"
              :stroke-width="20"
              style="width: 500px; display: inline-block"
            ></el-progress>
          </div>
          <p style="font-size: 20px; margin: 10px">考卷解析：</p>
          <el-collapse class="collapse" v-model="activeName" accordion>
            <el-collapse-item
              v-for="(item, index) in exam"
              :key="item.id"
              :title="item.question"
              :name="index"
            >
              <div>
                {{ item.analysis }}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeName: "1",
      examinfo: false,
      percentage: 0,
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      flag: true,
      score: 0,
      num: 0,
      exam: [],
      answers: [],
      useranswers: [],
      username: "",
      per: this.score,
      checked: true,
    };
  },
  created() {
    this.getExam();
    this.getuserinfo();
  },
  methods: {
    getExam() {
      axios({ url: "/data/test.json", method: "get" }).then((res) => {
        this.exam = res.data.test;
        this.exam.map((v) => {
          v.isTouched = false;
        });
        // console.log(this.exam);
        this.exam.forEach((v) => {
          this.answers.push(v.answer);
        });
      });
    },
    getuserinfo() {
      let userName = localStorage.getItem("username");
      this.username = userName;
    },
    getRadiovalue(val, index) {
      let str = val;
      str = str.substring(0, 1);
      this.useranswers[index] = str;
      this.exam[index].isTouched = true;
      let arr = this.useranswers.filter((v) => {
        return v !== null;
      });
      this.percentage = parseInt((arr.length * 100) / 15);
    },
    submit() {
      if (this.percentage !== 100) {
        this.$message({
          message: "还有题是空着的哦~",
          type: "warning",
        });
        return;
      }
      this.num = 0;
      this.score = 0;
      this.percentage = 0;
      this.exam.map((v) => {
        v.isTouched = false;
      });
      this.useranswers.forEach((v, i) => {
        if (i < 10) {
          if (v === this.answers[i]) {
            this.score += 5;
            this.num++;
          }
        } else {
          if (v === this.answers[i]) {
            this.score += 10;
            this.num++;
          }
        }
      });
      this.examinfo = false;
      // console.log(this.useranswers);
      this.per = this.score;
      this.checked = false;
      this.$message({
        message: `恭喜你答对了${this.num}题，得分:${this.score} ！再接再厉！`,
        type: "success",
      });
    },
  },
};
</script>

<style>
</style>